<template>
  <div class="back" :style="{ backgroundImage: `url(${jsonData.backImg})` }">
    <div class="app">
      <div class="search"></div>
      <div class="logo">
        <img :src="jsonData.logoImg" alt="logo"/>
        <p :style="{ color: jsonData.titleColor }">{{ jsonData.title }}</p>
      </div>
      <div class="menu" v-if="jsonData.menu">
        <div  v-for="(itme, index) in jsonData.menu.list" :key="index">
          <atom :navData="itme"></atom>
        </div>
        <div style="clear: both"></div>
      </div>
    </div>
    <div
        :style="{ height: totalHeight,backdropFilter : `blur(${jsonData.frostedGlassBlur}px` }"
        class="frostedGlass"
        v-show="isFrostedGlass"
    ></div>
  </div>
</template>

<script>
import atom from "./components/atom.vue";
import axios from "axios";

export default {
  name: "App",
  components: {atom},
  data() {
    return {
      backgroundImg: "../img/1.jpg",
      isFrostedGlass: true,
      menuList: [],
      totalHeight: "100%",
      jsonData: {},
    };
  },
  created: function () {
    this.getJson();
  },
  methods: {
    getJson() {
      let time = new Date().getTime();
      axios.get("./json/config.json?timestamp=" + time).then((res) => {
        if (null == res.data) {
          alert("json 解析失败，请重新编辑！");
          return;
        }
        let json = {};
        if (this.isJSON(res.data)) {
          json = JSON.parse(res.data);
        } else {
          json = res.data;
        }
        this.jsonData = json;
        document.title = json.title
        this.isFrostedGlass =  json.isFrostedGlass
        if (null != json.logoImg && json.logoImg !== '') {
          let linkElement = document.createElement('link');
          linkElement.rel = 'shortcut icon';
          linkElement.href = json.logoImg;
          document.getElementsByTagName('head')[0].appendChild(linkElement)
        }
      })
      setTimeout(() => {
        this.totalHeight = document.body.scrollHeight - 1 + "px";
      }, 500);
    },
    isJSON(str) {
      if (typeof str == 'string') {
        try {
          let obj = JSON.parse(str);
          return !!(typeof obj == 'object' && obj);
        } catch (e) {
          return false;
        }
      }
    }
  },
};
</script>

<style>
.back {
  width: 100%;
  min-height: 100vh;
  background: center center no-repeat fixed ;
  background-size: cover;
}

.frostedGlass {
  backdrop-filter: blur(15px);
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 1;
}

.app {
  position: relative;
  width: 100%;
  height: 100%;
  margin: 0 auto;
  z-index: 2;
}

.logo {
  margin: 0 auto;
  text-align: center;
  padding-top: 100px;
  padding-bottom: 60px;
}
.logo img {
  height: 130px;
}

.logo p {
  padding-top: 50px;
  font-size: 50px;
  text-shadow: 0 0 5px #3a3a3a;
}

@media screen and (max-width: 600px) {
  .app {
    width: 350px;
  }
  .logo {
    padding-top: 50px;
    padding-bottom: 30px;
  }
  .logo img {
    height: 80px;
  }

  .logo p {
    padding-top: 20px;
    font-size: 25px;
    text-shadow: 0 0 5px #3a3a3a;
  }
}

@media screen and (min-width: 1200px) {
  .app {
    width: 1000px;
  }
}

@media screen and (min-width: 2000px) {
  .app {
    width: 1750px;
  }
}
</style>
